<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    .ht-dark { color: #FFFFFF !important }
    .ht-dark select { background: #151515; color: #f8f8f2; }
    .ht-white { color: #000000 !important }
    .ht-white .btn { color: #000000 !important }
  </style>
  <link href="./static/bootstrap.min.css" rel="stylesheet">
  <link href="./static/codemirror.css" rel="stylesheet">
  <link rel="stylesheet" href="./static/monokai.css">
</head>
<!-- bg-dark text-white -->
<body class="ht">
  <div class="container-fluid">

    <div class="shadow p-1 mb-4 rounded row  text-white">

      <div class="col-2">
        <div class="btn-group" role="group" aria-label="Basic example">
          <button type="button" class="btn btn-link btn-sm" id="render">转换</button>
          <label class="btn btn-outline-default">
          <input class="" type="checkbox" value="" id="autoRender">auto
        </label>
        </div>
      </div>
 
 
       <div class="col-9" style="margin:0 auto;text-align:center">
        <select onchange="selectTheme()" id="select">
          <option selected="" value="default">明亮模式</option>
          <option value="monokai">暗黑模式</option>
        </select>
          <select class="custom-select custom-select-sm" id="demo" onchange="setDemo()">
            <option selected value="">示例</option>
          </select>
      </div>

      <div class="col-1">
        <button type="button" class="btn btn-link btn-sm" onclick="downloadSvg()">下载</button>
      </div>
   </div>

    <div class="row" style="height: 100%;">
      <div class="col-4 test" id="test">
        <!-- <p>Select a theme: <select onchange="selectTheme()" id="select">
          <option selected="">default</option>
          <option>monokai</option>
      </select>
      </p> -->
          <textarea  id="input"   placeholder="在这里粘贴您需要生成图表或流程图的文本">
flowchart LR
  Demo1:
  a --> b[[b]] & c([c])--> d[(Database)]
  Demo2:
  A o--o B
  B <--> C
  C x--x D
          </textarea>
        </div>

        <div class="col-8">
          <div id="output"></div>
        </div>
    </div>

  </div>

  

 <script src="./static/mermaid.min.js"></script>
 <script src="./static/codemirror.js"></script>
 <script src="./static/simplemode.js"></script>
 <script src="./static/placeholder.js"></script>
 <script src="./static/main.js"></script>

 <script>
 </script>
</body>
</html>